<template>
    <div class="main">
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="商家名称">
                    <el-input v-model="page.storeName" placeholder="请输入商家名称" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                    <el-button type="primary" @click="reset">导出列表</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" max-height="600px">
                <el-table-column type="index" width="55" />
                <el-table-column prop="sort" label="商户" align="center">
                    <template #default="scope">
                        <div>
                            <img :src="scope.row.logo" alt="" style="width: 50px;height: 50px;" v-if="scope.row.logo">
                            <span>{{ scope.row.storeName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="平台销售" align="center">
                    <template #default="scope">
                        <p>订单数量：{{ scope.row.orderAmount }}</p>
                        <p>订单金额：{{ scope.row.orderQuantity }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商家入账" align="center">
                    <template #default="scope">
                        <p>入账数量{{ scope.row.quantityCredited }}</p>
                        <p>入账金额：{{ scope.row.receiptAmount }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="体现中" align="center">
                    <template #default="scope">
                        <p>入账数量{{ scope.row.withdrawalAmountReceived }}</p>
                        <p>入账金额：{{ scope.row.withdrawalAmountMoney }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="已提现" align="center">
                    <template #default="scope">
                        <p>入账数量{{ scope.row.withdrawnAndCreditedQuantity }}</p>
                        <p>入账金额：{{ scope.row.withdrawnAndCreditedAmount }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="accumulatedRefunds" label="累计退款" align="center" />
                <el-table-column prop="merchantSettlementAmount" label="商家可结算金额" align="center" />
                <el-table-column prop="merchantsCanWithdrawCertainAmount" label="商家可体现余额" align="center" />
                <el-table-column label="其他" align="center">
                    <template #default="scope">
                        <span>分销佣金:{{ scope.row.distributionCommission }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button link type="danger" size="small" @click="delData(scope.row)">入账账单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { SettlementList } from '@/api/merchantManagement.js'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { ElMessage, ElMessageBox } from 'element-plus'

const page = reactive({
    storeName: "",
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = reactive([])
// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.storeName = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    getList()
}


// 获取列表
const getList = () => {
    tableData.length = 0;
    total.value = 0
    SettlementList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}




onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.box-card ::v-deep .el-select__wrapper {
    width: 100px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>